import React, { memo, useEffect } from "react";
import { View } from "@tarojs/components";
import { useSelector } from "react-redux";
import { formatNumber } from "@/utils/fomatter";
import { EChart } from "../../echarts-taro3-react";

import "./index.scss";




function Bar(props) {
  const { reportDetail } = useSelector(state => state.obsPool)
  let barChart: any;
  let refBarChart = (node) => {
    barChart = node
  };
  useEffect(() => {

    const option = {

      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 1,
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {       // 属性lineStyle控制线条样式
              type: 'dotted',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {           // 分隔线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              type: 'dotted',
              opacity: 1
            }
          },
        }
      ],
      yAxis: {
        type: 'category',
        inverse: true,
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#000",
          interval: 0,
          fontSize: '12',
          // margin: 35,
          formatter: function (value) {
            if (value.length > 8) {
              return value.substring(0, 6) + "...";
            } else {
              return value;
            }
          }
        },

        data: new Array<string>()
      },
      series: [
        {
          name: 'Profit',
          type: 'bar',
          barWidth: 36, // 柱图宽度
          // barCateGoryGap: '24',
          itemStyle: {
            normal: {
              color: function (params) {
                if (params.data.value > 0) {
                  return "#E55252"
                } else if (params.data.value < 0) {
                  return "#28C499"
                } else {
                  return "#414D5E"
                }
              }
            }
          },

          emphasis: {
            focus: 'series'
          },
          data: new Array<string | number>()
        },
      ]
    };
    let yAxisData: string[] = []
    let seriesData: any[] = []
    let resultList = reportDetail.otherList.length ? JSON.parse(JSON.stringify(reportDetail.otherList)) : []
    let result = resultList.length ? resultList.sort((a, b) => b.lastYearYield - a.lastYearYield) : []


    result.forEach(item => {
      yAxisData.push(item.fundName)
      seriesData.push({
        value: item.lastYearYield ?? 0.0,
        label: {
          // 设置显示label
          show: true,
          // 设置label的位置
          position: item.lastYearYield == 0 ? 'right' :
            (Math.abs(item.lastYearYield) < 0.05 ? (item.lastYearYield > 0 ? 'right' : 'left') :
              (item.lastYearYield > 0 ? 'insideRight' : 'insideLeft')
            ),
          formatter: function () {
            if (item.lastYearYield != 0) {
              return formatNumber(item.lastYearYield * 100, 2) + '%'
            } else {
              return null
            }
          },
          color: '#414D5E'



        },

      })
    })
    option.yAxis.data = yAxisData
    option.series[0].data = seriesData
    barChart.refresh(option);
  }, [barChart, reportDetail])


  return (
    <View className='bar-chart'>
      <EChart
        ref={refBarChart}
        canvasId='bar-canvas'
      />

    </View>
  );
}

export default memo(Bar)
